<template>
  <div class="follow-up-card">
    <!-- 顶部tab切换栏 -->
    <div class="card-tabs">
      <div
        v-for="tab in tabs"
        :key="tab.value"
        class="card-title"
        :class="{ active: activeTab === tab.value }"
        @click="tabsFunction(tab.value)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 折叠面板 -->
    <el-collapse
      v-model="activeNames" v-if="activeTab === 'history'&& historyList.length>0"
      class="follow-up-collapse"
    >
      <el-collapse-item :name="index" v-for="item,index in historyList" :key="index" >
        <template #title>
          <div class="collapse-title">  
            <span class="diagnosis">{{ item.execTime }}</span>
          </div>
        </template>
        <div class="collapse-content" >
          <div class="collapse-title ">
            <span class="diagnosis" style="width: 100%;">{{ sideTypeEnumText(item.execType)}}


              <span style="color: rgba(24, 179, 171, 1);position: absolute;right: 0px;cursor: pointer;" @click="showExecDialogFunc(item,index)" >编辑</span>
            </span>
          </div>
          <div style="margin-top: 5px;">
            <div class="info-row">
              <span class="label"> {{item.groupName ?item.groupName+'丨':'' }}第{{item.execTimes}}次</span>
            </div>
            <div class="info-row">
              <span class="label">治疗效果：{{item.execResult}}</span>
            </div>
          </div>
          <div style=" margin-top: 10px">
            <div class="info-row">
              <span class="label">执行人员：{{item.execBy}}</span>
            </div>
            <div class="">
              <span class="label">执行时间：{{item.execTime}}</span>
            </div>
          </div>
     
        </div>
      </el-collapse-item>
    
    </el-collapse>
    <el-empty :image-size="100"   :image="emptyImage" style="height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;" v-if="activeTab === 'history' && historyList.length == 0" />
    <el-collapse
      v-model="activeNames" 
      v-if="activeTab === 'charge' && chargeList.length > 0"
      class="follow-up-collapse"
    >
      <el-collapse-item :name="index" v-for="item,index in chargeList" :key="index" >
        <template #title>
          <div class="collapse-title">  
            <span class="diagnosis">{{ item.orderTime }}</span>
          </div>
        </template>
        <div class="collapse-content" >
          <div >
            <div class="info-row">
              <span class="label">收费金额：{{(Number(item.subtotal / 100)).toFixed(2)}}元</span>
            </div>
            <div class="info-row">
              <span class="label">收费状态：{{ payStatusEnumText(item.payStatus)}}</span>
            </div>
          </div>
          <div style=" margin-top: 10px">
            <div class="info-row">
              <span class="label">开单人员：{{item.orderBy}}</span>
            </div>
            <div class="">
              <span class="label">开单时间：{{ item.orderTime }}</span>
            </div>
          </div>
     
        </div>
      </el-collapse-item>
    
    </el-collapse>
    <el-empty :image-size="100"   :image="emptyImage"   style="height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;"  v-if="activeTab === 'charge' && chargeList.length == 0" />
    <CommonDialog
      v-model:visible="showExecDialog"
      title="执行"
      :width="480"
      @close="showExecDialog = false"
      @confirm="handleExecConfirm"
    >
      <template #body>
        <div style="margin-bottom: 12px; color: #666; font-size: 15px">
          本次为第{{ infoItem.execTimes }}次执行
        </div>
        <el-input
          v-model="infoItem.execResult"
          type="textarea"
          :rows="3"
          placeholder="执行效果"
          style="width: 100%; margin-bottom: 12px"
        />
        <div style="color: #888; font-size: 14px; margin-top: 0">
          执行人：{{userInfo.userName}}　执行时间：{{userInfo.time}}　
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="handleExecConfirm">确认</el-button>
      </template>
    </CommonDialog>
  </div>
</template>

<script lang="ts" setup>
import CommonDialog from './CommonDialog.vue';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import { ref } from 'vue';
import type {
  ChargeListResponse, ChargeListResponseData,
} from '@/types/exec';
import { getChargeList ,updateExecRecord} from '@/api/exec';
import stores from '@/store';
import { ta } from 'element-plus/es/locales.mjs';
const useBaseData = stores.useBaseDataStore();
let payStatusEnum = useBaseData.getEnumSelect('payStatusEnum');
const sideTypeEnum = ref<any>(
  stores.useBaseDataStore().getDictsSelect('EXEC_TYPE')
);

//编辑执行记录
const showExecDialog = ref(false);
const infoItem = ref<any>({
  execResult: '',
  recordId: null,
  execTimes: null,
});
const userInfo = ref<any>(null);
const listindex = ref(0);
const showExecDialogFunc = (row:any,index:any) => {
  listindex.value = index;
  const today = new Date()
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0');
  const day = String(today.getDate()).padStart(2, '0');
  const hours = String(today.getHours()).padStart(2, '0');
  const minutes = String(today.getMinutes()).padStart(2, '0');
  const seconds = String(today.getSeconds()).padStart(2, '0');
  userInfo.value = {
    userName: getUserInfo().empName,
    time: `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
  } 
  
  infoItem.value.execResult = row.execResult;
  infoItem.value.recordId = row.recordId;
  infoItem.value.execTimes = row.execTimes;
  //console.log(infoItem.value);

  showExecDialog.value = true;

  //console.log(showExecDialog.value);
  
};
const handleExecConfirm = async () => {
  let data = {
    execResult:infoItem.value.execResult,
    recordId: infoItem.value.recordId,
  }
  let res:any = await updateExecRecord(data);
  if(res.code == '200'){
    historyList.value[listindex.value].execResult = infoItem.value.execResult;
    ElMessage({
      type: 'success',
      message: res.msg,
      duration: 2000,
    })
    showExecDialog.value = false;
  }else{
    // ElMessage({
    //   type: 'error',
    //   message: res.msg,
    //   duration: 2000,
    // })
  }

};

const payStatusEnumText = (val: any) => {
  return payStatusEnum.find((item: any) => item.value === val)?.text;
};
const sideTypeEnumText = (val: any) => {
  //console.log(sideTypeEnum.value,'sideTypeEnum');
  
  for (let index = 0; index < sideTypeEnum.value.length; index++) {
    let item = sideTypeEnum.value[index];
    if (val == item.itemCode) {
      return item.itemName;
    }
  }
};
const props = defineProps<{
  orderId: number | null;
  historyList: any;
  types?: any;
}>();
const historyList = ref(props.historyList);
const types = ref(props.types);



// 顶部tab数据与选中状态
const tabs = ref<any>([
 
]);

if(props.types == "execute-ext") {
  tabs.value = [{ label: '执行记录', value: 'history' }];
}else{
  tabs.value = [
    { label: '执行记录', value: 'history' },
    { label: '收费记录', value: 'charge' },
  ]
}
const activeTab = ref('history');
watch(() => props.historyList, (newVal, oldVal) => {
  // 当外部传值变化时执行相应逻辑
  tabsFunction(activeTab.value);
  historyList.value = props.historyList;
  types.value = props.types;
  activeTab.value = 'history';
  if(props.types == "execute-ext") {
    tabs.value = [{ label: '执行记录', value: 'history' }];
  }else{
    tabs.value = [
      { label: '执行记录', value: 'history' },
      { label: '收费记录', value: 'charge' },
    ]
  }
})

// 折叠面板控制
const activeNames = ref(['1']);
const isExpanded = ref(true); // 控制折叠面板显示/隐藏
const chargeList = ref<ChargeListResponseData[]>([]);

const getChargeListApi = async () => {
  //console.log(props.orderId);
  
  const res = await getChargeList(props.orderId);
  if (res.code == '200') {
    chargeList.value = res.data;
  } else {

  }
};

const tabsFunction = (value: string) => {
  activeTab.value = value;
  if (value === 'charge') {
    getChargeListApi();
  }else{
    
  }
};
// 切换折叠状态
const toggleCollapse = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<style scoped lang="scss">

.follow-up-card {
  background: #ffffff;
  border-radius: 8px;
  width: 280px;
  height: 100%;
  overflow: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-tabs {
  display: flex;
  width: 100%;
  background: #f8f8f8;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #ededed;
}
.card-title {
  flex: 1;
  text-align: center;
  height: 48px;
  line-height: 48px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  color: #999;
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.card-title.active {
  color: #222;
  font-weight: 700;
}

.diagnosis-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e7e7;
}

.diagnosis-name {
  font-size: 16px;
  color: #666;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.doctor-info:hover {
  opacity: 0.8;
}

.doctor-name {
  font-size: 14px;
  color: #666;
}

.visit-date {
  font-size: 14px;
  color: #666;
}

.expand-icon {
  font-size: 12px;
  color: #666;
  transition: transform 0.3s ease;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.follow-up-collapse {
  border: none;
  padding: 0px 16px 10px 16px;
}

:deep(.el-collapse-item__header) {
  border: none;
  border-radius: 6px;
}

:deep(.el-collapse-item__arrow) {
  transition: transform 0.3s ease;
  transform: rotate(-90deg); /* 默认状态(关闭时)向上 */
}

:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(90deg); /* 展开状态(打开时)向下 */
}

:deep(.el-collapse-item__content) {
  padding: 15px 8px;
  background: #f8f8f8;
  border-radius: 0 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #dcdcdc;
}

.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.diagnosis {
  color: #333;
  font-weight: bold;
  font-size: 13px;
  position: relative;
}

.action-btn {
  font-size: 14px;
  color: #00b3b3;
  cursor: pointer;
}

.collapse-content {
  font-size: 11px;
  line-height: 1.6;
}

.info-row {
  margin-bottom: 8px;
}

.label {
  color: #666;
  margin-right: 8px;
  min-width: 80px;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}
.tcm-box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed #dcdcdc;
  gap: 0;
}
.tcm-box .info-row {
  width: 33.33%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  padding: 8px 0;
}
.tcm-box .label {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
